<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="utf-8">
    <title>牛皮</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!-- 引入框架的js、css等 -->
    <jsp:include page="${request.contextPath}/static/include.jsp" flush="true" />

    <script type="text/html" id="leftTableBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="rightTableBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </script>

    <script type="text/javascript">
        layui.use([ 'form', 'layer', 'table', 'laydate' ], function() {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                table = layui.table;

            table.render({
                elem : '#_leftTable'
                ,url : __ctxPath + '/framework/SysCodeset.do?method=list'
                ,cellMinWidth : 120 			//全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
                ,page : true 					//开启分页（默认：false）
                ,height : "full-75" 			//设定容器高度
                ,limits : [ 10, 15, 20, 25 ] 	//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。
                ,limit : 15 					//每页显示的条数（默认：10）。值务必对应 limits 参数的选项。优先级低于 page 参数中的 limit 参数。
                ,toolbar: '#_leftTableToolbar'		//开启工具栏（动态列素筛选、导出、打印）
                ,loading: true 					//开启加载效果（默认false）
                ,id : "_leftTable"
                ,request: {
                    pageName: 'page', //页码的参数名称，默认：page
                    limitName: 'rows' //每页数据量的参数名，默认：limit
                }
                ,cols : [[
                    {
                        type:'radio'
                    },{
                        field : "lid"
                        ,title : "主键"
                        ,hide : true
                    },{
                        field : "cnName"
                        ,title : "中文名称"
                        ,align : "left"
                        ,sort : true
                    },{
                        field : "enName"
                        ,title : "英文名称"
                        ,align : "left"
                        ,sort : true
                    },{
                        field : "remark"
                        ,title : "备注说明"
                        ,align : "left"
                        ,sort : true
                    },{
                        title : "操作"
                        ,templet : '#leftTableBar'
                        ,fixed : "right"
                        ,align : "center"
                    }
                ]]
                ,done : function(res, curr, count){

                }
            });

            //监听行单击事件
            table.on('row(_leftTable)', function(obj){
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');//选中行样式
                obj.tr.find('input[lay-type="layTableRadio"]').prop("checked",true);
                form.render('radio');

                var data = obj.data;
                table.reload("_rightTable", {
                    where: {clid: data.lid}
                });
            });

            //监听table行内编辑按钮
            table.on('tool(_leftTable)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var layEvent = obj.event,
                    data = obj.data;

                if (layEvent === 'edit') { //编辑
                    toPage("/framework/SysCodeset.do?method=toEditOrDetail", {lid: data.lid, pageType: TO_EDIT, pageUrl: "system/sysCodeset/jsp/update.jsp", width:'35%', height:'50%'});
                } else if (layEvent === 'del') { //删除
                    layer.confirm('确定删除该记录？', {icon : 3, title : '提示信息'}, function(index) {
                        $.post(__ctxPath+"/framework/SysCodeset.do?method=delete", {lid: data.lid}, function(response){
                            layer.close(index);
                            if(response.msg) layer.msg(response.msg);
                            if(response.code == RESPONSE_SUCCESS){
                                reloadTable("_leftTable");
                                reloadTable("_rightTable");
                            }
                        });
                    });
                } else if(layEvent == 'detail'){ //查看明细
                    detail(data);
                }
            });

            table.render({
                elem : '#_rightTable'
                ,url : __ctxPath + '/framework/sysCodesetDetail.do?method=listByCodesetLid'
                ,cellMinWidth : 120 			//全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
                ,page : false 					//开启分页（默认：false）
                ,height : "full-75" 			//设定容器高度
                ,toolbar: '#_rightTableToolbar'		//开启工具栏（动态列素筛选、导出、打印）
                ,loading: true 					//开启加载效果（默认false）
                ,id : "_rightTable"
                ,request: {
                    pageName: 'page', //页码的参数名称，默认：page
                    limitName: 'rows' //每页数据量的参数名，默认：limit
                }
                ,cols : [[
                    {
                        type : "checkbox"
                        ,fixed : "left"
                        ,width : 50
                    },{
                        field : "lid"
                        ,title : "主键"
                        ,hide : true
                    },{
                        field : "k"
                        ,title : "键"
                        ,align : "left"
                        ,sort : true
                    },{
                        field : "v"
                        ,title : "值"
                        ,align : "left"
                        ,sort : true
                    },{
                        field : "remark"
                        ,title : "备注说明"
                        ,align : "left"
                        ,sort : true
                    },{
                        title : "操作"
                        ,templet : '#rightTableBar'
                        ,fixed : "right"
                        ,align : "center"
                    }
                ]]
                ,done : function(res, curr, count){
                    $(".toAddCodesetDetail").click(function(){ //由于刷新table会重新渲染按钮，所以得重新添加监听器
                        var lid = $("[lay-id=_leftTable] .layui-table-click [data-field=lid] div").html(); //获取勾选id，checkStatus出bug了
                        if(!lid) {
                            layer.msg("请勾选左边的主项");
                            return;
                        }
                        toPage('system/sysCodeset/jsp/addCodesetDetail.jsp', {lid:lid, width:'35%', height:'60%', title:'新增'});
                    });

                    $("#deleteBatchCodesetDetail").on("click", function() { //由于刷新table会重新渲染按钮，所以得重新添加监听器
                        layer.confirm('确定删除所选的'+table.checkStatus('_rightTable').data.length+'该记录？', {icon : 3, title : '提示信息'}, function(index) {
                            var lids = getLidsOfSelections('_rightTable');
                            $.post(__ctxPath+"/framework/sysCodesetDetail.do?method=delete", {lids: lids}, function(response){
                                if(response.msg) layer.msg(response.msg);
                                if(response.code == RESPONSE_SUCCESS){
                                    reloadTable("_rightTable");
                                }
                            });
                        });
                    });
                }
            });

            //监听table行内编辑按钮
            table.on('tool(_rightTable)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var layEvent = obj.event,
                    data = obj.data;

                if (layEvent === 'edit') { //编辑
                    toPage("/framework/sysCodesetDetail.do?method=toEditOrDetail", {lid: data.lid, pageType: TO_EDIT, pageUrl: "system/sysCodeset/jsp/updateCodesetDetail.jsp", width:'35%', height:'60%'});
                }
            });

        });
    </script>
</head>

<body>
    <div class="layui-row layui-col-space14">
        <%-- 左边的table --%>
        <div class="layui-col-md6">
            <div class="layui-card" style="height: 88%;">
                <div class="layui-card-body">
                    <%--<form id="_form" class="layui-form" action="">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="padding-left: 0px;">中文名</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="Q_caseNo_S_LK">
                            </div>
                        </div>
                        <button type="button" class="layui-btn layui-icon search_btn"
                                style="margin-left: 30px;padding: 0 10px;">&#xe615;&nbsp;查询</button>
                    </form>--%>
                    <script type="text/html" id="_leftTableToolbar">
                        <div class="table-tool-btn">
                            <button type="button" class="layui-btn layui-icon-add-1 layui-icon"
                                    onclick="toPage('system/sysCodeset/jsp/add.jsp', {width:'40%', height:'60%', title:'新增'})">新增</button>
                        </div>
                    </script>
                    <table id="_leftTable" lay-filter="_leftTable"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <%-- 右边的table --%>
            <div class="layui-card" style="height: 88%;">
                <div class="layui-card-body">
                    <script type="text/html" id="_rightTableToolbar">
                        <div class="table-tool-btn">
                            <%--<button type="button" class="layui-btn layui-icon-add-1 layui-icon"
                                    onclick="toPage('system/sysCodeset/jsp/addCodesetDetail', {width:'40%', height:'60%', title:'新增'})">新增</button>--%>
                            <button type="button" class="layui-btn layui-icon-add-1 layui-icon toAddCodesetDetail">新增</button>
                            <button type="button" class="layui-btn layui-icon-delete layui-icon" id="deleteBatchCodesetDetail">批量删除</button>
                        </div>
                    </script>
                    <table id="_rightTable" lay-filter="_rightTable"></table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
